<template>
	<uni-popup ref="popup" type="bottom">
		<view class="popup-content d-flex flex-column">
			<scroll-view class="scrolls" scroll-y>
				<bhg-coupon colors="#fa436a" :couponList="couponList" @onReceive="onReceive" style="background-color: white;"></bhg-coupon>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from "../../../components/uni-popup/uni-popup.vue"
	import bhgCoupon from "@/uni_modules/bhg-coupon/components/bhg-coupon/bhg-coupon.vue"
	import coupon from "@/api/coupon.js"
	export default {
		components: {
			bhgCoupon
		},
		data() {
			return {

				couponshow: false,
				couponList: [ //优惠券列表
					{
						money: 100,
						reduce: 30,
						date: '2023-02-09 2023-10-02',
						id: 3,
						status: 0,
						condition: ['数码产品可用', '不可与其他产品共享']
					}, {
						money: 100,
						reduce: 40,
						date: '2023-02-09 2023-10-02',
						id: 4,
						status: 0,
						condition: ['新人专享', '可与其他产品共享']
					}, {
						money: 100,
						reduce: 50,
						date: '2023-02-09 2023-10-02',
						id: 5,
						status: 0,
						condition: ['新人专享', '仅在支付时使用']
					}
				],

			}
		},
		methods: {
			open() {
				this.$refs['popup'].open()
				this.getCoupon()
			},
			close(){
				this.$refs['popup'].close()
			},
			getCoupon(){
				coupon.get(100).then(res=>{
					console.log(res);
					this.couponList = res.data
				})
			},
			//领取优惠券 立即使用事件
			onReceive(item, index) {
				console.log(item, index)
				if (item.status == 1) {
					// 立即使用 事件
					this.$emit('selectCoupon',item)
				} else {
					this.couponList[index].status = 1 //领取成功
					uni.showToast({
						title: '领取成功',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style scoped>
	.scrolls{
		height:100%;
		width:100%;
		background-color: #f1f1f1;
	}
	.popup-content {
		background-color: #f1f1f1;
		border-radius: 24rpx 24rpx 0 0;
		height: 50vh;
		padding:0.6rem 0;
	}
	
	.close_btn {
		width: 40rpx;
		height: 40rpx;
	}
</style>